<script>
import { defineComponent, ref, onMounted } from '@vue/composition-api';
import { GetActivityCancelApplyList,GetActivityMemberList, addFile, actActivity,actInfo } from '@/api/activity';
import { Message, MessageBox } from 'element-ui';
import { getToken } from '@/utils/auth';

export default defineComponent({
  props: {
    status: Number,
    activityId: String,
    mark2:Number,
  },
  setup(props) {
    const loading = ref(false);
    const list = ref([]);
    const activityIds = ref([]);
    const pageNum = ref(1);
    const pageSize = ref(10);
    const open = ref(false);
    const openAct = ref(false);
    const markOpen = ref(false);
    const multiple = ref(true);
    const uploadUrl = ref('');
    const radio = ref('2');
    const total = ref(0);
    const placeFileList = ref([]);
    const files = ref([])
    const uploadHeaders = ref({ Authorization: 'Bearer ' + getToken() });
    const formRef = ref();
    const markFrom = ref([]);
    const formModel = ref({ stuId: '' });
    const upload = ref(
      {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/common/upload',
        // url: process.env.VUE_APP_BASE_API + '/system/user/importData',
        college: '',
        fileChangeFlag: false,
        fileList: [],
        teamid: '',
        progressFlag: true, // 显示进度条
        loadProgress: 0,
      }
    )
    const loadData = async () => {
      loading.value = true;
      const payload = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        ...formModel.value,
        activityId: props.activityId,//'0T8ofpRjLWN9UcwQUO8'//
        mark2:props.mark2
      };
      const response = await GetActivityMemberList(payload);
      loading.value = false;
      if (response.code === 200) {
        const { rows, total: rowTotal } = response;
        list.value = rows;
        total.value = rowTotal;
      } else {
        loading.value = false;
      }
    };

    const goBack = async () => {
      //删除当前标签页
      const detailPath = await handleActivePath(route, true)
      store.dispatch('tabs/delVisitedRoute', detailPath)
      //打开父标签
      await router.push('Transfer')
    };

    // 上传材料
    const AddList = async () => {
      open.value = true
      uploadUrl.value = process.env.VUE_APP_BASE_API + '/common/upload'
      // console.log(upload.value.open);
    }
    // 文件上传中处理
    const handleFileUploadProgress = (event, file, fileList) => {
      upload.value.isUploading = true;
    }
    // 文件上传成功处理
    const handleFileSuccess = (response, file, fileList) => {
      console.log(response);
      files.value.push(response.url)
      upload.value.isUploading = false;
      // upload.value.clearFiles();
    }
    // 上传失败
    const handleUploadError = async (err) => {
      Message({
        message: '上传失败, 请重试',
        type: 'error',
      });
    }

    const submitFileForm = async () => {
      const data = {
        urls: files.value,
        activityId: props.activityId
      }
      console.log(data);
      const response = await addFile(data)
      // console.log(response);
      if (response.code === 200) {
        Message({
          message: '上传成功',
          type: 'success',
        });
        resets()
        loadData()
      }
    }
    const resets = async () => {
      // upload.value.clearFiles();
      placeFileList.value = []
      open.value = false
      openAct.value = false
      radio.value = '2'
    }
    // 多选
    const handleSelectionChange = (selection) => {
      activityIds.value = selection.map(item => item.activityMemberOrganizeId);
      // this.single = selection.length !== 1;
      multiple.value = !selection.length;
    }
    const actionAct = (row) => {
      if(row.activityMemberOrganizeId){
        activityIds.value = []
        activityIds.value.push(row.activityMemberOrganizeId)
        // console.log(activityIds.value);
      }else{
        activityIds.value = activityIds.value
      }
      // activityIds.value = row.activityMemberOrganizeId || activityIds.value
      openAct.value = true
    }
    const submitAct = async() =>{
      console.log(activityIds.value);
      let data = {
        activityIds:activityIds.value,
        status:radio.value
      }
      // console.log(data);
      const res = await actActivity(data)
      console.log(res);
      if(res.code === 200){
        Message({
          message: res.msg,
          type: 'success',
        });
        loadData();
        resets()
      }
    }
    const getActInfo = async (row) =>{
      markOpen.value = true
      const res = await actInfo(row.userName,props.activityId)
      console.log(res);
      if(res.code === 200){
        markFrom.value = res.rows
      }
    }
    const refresh = () => {
      pageNum.value = 1;
      loadData();

    };

    const reset = formEl => {
      formEl.resetFields();
      refresh();
    };

    onMounted(() => {
      loadData();
    });
    return {
      formRef,
      formModel,
      loadData,
      reset,
      loading,
      list,
      total,
      pageNum,
      pageSize,
      uploadUrl,
      open,
      uploadHeaders,
      AddList,
      handleFileUploadProgress,
      handleFileSuccess,
      handleUploadError,
      submitFileForm,
      resets,
      placeFileList,
      handleSelectionChange,
      actionAct,
      openAct,
      radio,
      multiple,
      submitAct,
      getActInfo,
      markOpen,
      markFrom
    };
  },
});
</script>

<template>
  <div>
    <el-row>
      <el-form ref="formRef" :model="formModel" inline size="mini">
        <el-form-item label="学生" prop="stuId">
          <el-input v-model="formModel.stuId" placeholder="请输入学号或姓名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="loadData">查询</el-button>
          <el-button type="primary" size="mini" @click="reset(formRef)">重置</el-button>
          <el-button type="primary" size="mini" @click="AddList">上传材料</el-button>
          <el-button type="primary" size="mini" @click="actionAct" :disabled="multiple" v-hasPermi="['activity:manager:shen']">批量审核</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="学号" align="center" prop="userName" />
        <el-table-column label="姓名" align="center" prop="nickName" />
        <el-table-column label="系部" align="center" prop="unitName" />
        <el-table-column label="类型" align="center" prop="role" />
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            {{ scope.row.status == 1 ? '待审核' : scope.row.status == 2 ? '审核通过' : '审核不通过' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="getActInfo(scope.row)">
              查看
            </el-button>
            <el-button type="primary" size="mini" @click="actionAct(scope.row)">
              审核
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadData" />
    </el-row>
    <el-dialog title="上传材料" :visible.sync="open" width="400px">

      <el-form ref="form">
        <el-form-item>
          <el-upload ref="upload" :limit="3" :action="uploadUrl" :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess" :on-error="handleUploadError" :headers="uploadHeaders"
            :file-list="placeFileList">
            <el-button size="small" type="primary">材料上传</el-button>
            <div slot="tip" class="el-upload__tip">
              材料一次性最多只能上传3个,材料总大小不能超过1GB
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="resets">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="审核" :visible.sync="openAct" width="400px">

      <el-form ref="form">
        <el-form-item>
          <el-radio v-model="radio" label="2">审核通过</el-radio>
          <el-radio v-model="radio" label="3">审核拒绝</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAct">确 定</el-button>
        <el-button @click="resets">取 消</el-button>
      </div>
    </el-dialog>

    <!--查看考核信息对话框 -->
    <el-dialog title="查看工作考核" :visible.sync="markOpen" width="800px" append-to-body>
      <el-table v-loading="loading" :data="markFrom" border>
        <el-table-column label="作品名称" align="center" prop="fileName" />
        <el-table-column label="上传时间" align="center" prop="createTime" />
      </el-table>
    </el-dialog>

  </div>
</template>
